<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Luogu Record</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" />
    <style>
      :root { --bg: #ffffff; --fg: #222; --muted: #666; --accent: #0b6bcb; }
      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
      .canvas { width: 3840px; padding: 72px 96px; box-sizing: border-box; font-family: 'JetBrains Mono', Consolas, monospace; }
      .section { margin-bottom: 16px; }
      .header { display: flex; justify-content: space-between; align-items: baseline; }
      .title { font-size: 56px; font-weight: 600; }
      .meta { font-size: 32px; color: var(--muted); }
      .code { border: 1px solid #eee; border-radius: 12px; padding: 32px; }
      pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 52px; line-height: 1.9; }
      .footer { margin-top: 8px; font-size: 12px; color: var(--muted); }
      .result { border: 1px dashed #ddd; border-radius: 12px; padding: 24px; }
      .result .row { display: flex; gap: 36px; font-size: 28px; }
      .badge { color: #fff; background: #52c41a; border-radius: 8px; padding: 6px 16px; font-weight: 700; font-size: 32px; }
      .problem { border: 1px solid #eee; border-radius: 8px; padding: 16px; }
      .problem h3 { margin: 0 0 8px 0; font-size: 42px; }
      .problem-content { font-size: 32px; line-height: 2.0; white-space: pre-wrap; word-break: break-word; }
      .code-grid { display: grid; gap: 24px; }
      .code-grid.col-1 { grid-template-columns: 1fr; }
      .code-grid.col-2 { grid-template-columns: 1fr 1fr; }
      .code-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
      .code-grid.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    </style>
  </head>
  <body>
    <div class="canvas" id="canvas">
      <div class="section problem" id="problemSection">
        <h3>题目内容</h3>
        <div class="problem-content" id="problemContent"></div>
        <div class="footer" id="footerProblem"></div>
      </div>

      <div class="section" id="info">
        <div class="header">
          <div class="title" id="problemTitle"></div>
          <div class="meta" id="recordMeta"></div>
        </div>
        <div class="footer" id="footerInfo"></div>
      </div>

      <div class="section code code-grid col-1" id="codeGrid">
        <pre><code class="language-source" id="codeCol1"></code></pre>
        <pre><code class="language-source" id="codeCol2"></code></pre>
        <pre><code class="language-source" id="codeCol3"></code></pre>
        <pre><code class="language-source" id="codeCol4"></code></pre>
        <div class="footer" id="footerCode"></div>
      </div>

      <div class="section result" id="result">
        <div class="row">
          <div>评测结果: <span class="badge" id="status"></span></div>
          <div>得分: <span id="score"></span></div>
          <div>用时: <span id="runtime"></span></div>
          <div>内存: <span id="memory"></span></div>
        </div>
        <div class="footer" id="footerResult"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
    <script>
      (function() {
        const params = new URLSearchParams(location.search);
        const problem = params.get('problem') || '';
        const title = params.get('title') || '';
        const recordId = params.get('rid') || '';
        const lang = params.get('lang') || '';
        const time = params.get('time') || '';
        const code = params.get('code') || '';
        const pcontent = params.get('pcontent') || '';
        const status = params.get('status') || '';
        const score = params.get('score') || '';
        const runtime = params.get('runtime') || '';
        const memory = params.get('memory') || '';
        document.getElementById('problemTitle').textContent = `${problem} ${title}`.trim();
        document.getElementById('recordMeta').textContent = `提交时间: ${time} | 记录ID: ${recordId} | 语言: ${lang}`;
        if (code) { document.getElementById('codeCol1').textContent = code; }
        document.getElementById('status').textContent = status;
        document.getElementById('score').textContent = score;
        document.getElementById('runtime').textContent = runtime;
        document.getElementById('memory').textContent = memory;
        if (pcontent) { document.getElementById('problemContent').textContent = pcontent; }
        var st = (status || '').toLowerCase();
        var badge = document.getElementById('status');
        var color = '#52c41a';
        if (st && st !== 'ac') { color = '#d4380d'; }
        badge.style.background = color;
        document.getElementById('footerInfo').textContent = '题目与提交信息';
        document.getElementById('footerCode').textContent = '源代码';
        document.getElementById('footerResult').textContent = '评测结果汇总';
        document.getElementById('footerProblem').textContent = '题面摘要';
      })();
    </script>
  </body>
  </html>
